<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @Launchform="Launchform" @findClicked="findClicked" />
    <el-card shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <el-card style="width: 40%" shadow="never" :body-style="{ padding: '12px 10px 12px' }">
          <div>
            <span style="font-weight: 600">选择指令</span>
          </div>
          <Table
            :summaryData="summaryData"
            summary
            :tableData="upperInstructionData.dto"
            :tableHeader="tableHeader"
            :TableHeight="100"
            :outTableHeight="80"
            @currentRow="clicktogetdata"
            :isLoading="isLoading"
          />
        </el-card>

        <el-card style="width: 35%" shadow="never" :body-style="{ padding: '12px 36px 12px' }">
          <div>
            <span style="font-weight: 600">号码明细</span>
          </div>
          <Table
            :summaryData="summaryData1"
            :tableData="GlobalTabularData.detailDtos"
            summary
            :tableHeader="tableHeader2"
            :TableHeight="52"
            :isLoading="isLoading1"
          />
        </el-card>

        <el-card shadow="never" style="width: 25%" :body-style="{ padding: '0' }">
          <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
            <div>
              <span style="font-weight: 600">缴库明细</span>
            </div>
            <Table
              :summaryData="summaryData2"
              :tableData="GlobalTabularData.inDtos"
              summary
              :tableHeader="tableHeader3"
              :TableHeight="40"
              :isLoading="isLoading2"
            />
          </el-card>

          <el-card shadow="never" :body-style="{ padding: '12px 10px 12px' }">
            <div>
              <span style="font-weight: 600">发料明细</span>
            </div>
            <Table
              :summaryData="summaryData3"
              :tableData="GlobalTabularData.outDtos"
              summary
              :tableHeader="tableHeader4"
              :TableHeight="40"
              :isLoading="isLoading3"
            />
          </el-card>
        </el-card>
      </div>

      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import type { formListType } from '@/components/Find/index.vue'
import { ElMessage } from 'element-plus'
import { QueryDeptName } from '@/api/GeneralManager/Factoryinquiry/UpperInventory'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ShoeUpperIntoTheWarehouseQueryKa'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import { updateData, VampStockInquiry, VampWarehouseAccount } from '@/api/GeneralManager/Factoryinquiry/ShoeStorage'
import type { UpperBodyTableData, UpperBodyTableDataParameters, VampWarehouseAccounts } from '@/api/GeneralManager/Factoryinquiry/ShoeStorage'
// 缴库部门查询
const QueryDeptNameMethods = async () => {
  try {
    const result = await QueryDeptName()
    formList.value[5].selectOptions = EvaluatesTheArrayReturnValue(result)
  } catch (error) {
    JMessage.error('缴库部门查询寻出错')
  }
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}
const formList = ref<any>([
  {
    type: 'input',
    inputPlaceholder: '请输入厂区',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'date',
    dateLabel: '日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '缴库部门',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'color',
    color1: '#3FFF38',
    color1Val: '已发料结束',
    color2: '#5daeff',
    color2Val: '已缴库结束'
  },
  {
    type: 'button',
    checkboxLabel: '鞋垫查询'
  },
  {
    type: 'button',
    checkboxLabel: '更新鞋面库存',
    bgColor: '#1890FF'
  }
])

const isLoading = ref(true)
const isLoading1 = ref(true)
const isLoading2 = ref(true)
const isLoading3 = ref(true)

//号码明细数据
const GlobalTabularData = ref<VampWarehouseAccounts>({
  detailDtos: [],
  inDtos: [],
  ordSum: 0,
  rpSum: 0,
  inSum: 0,
  outDtos: [],
  outSum: 0,
  stockSum: 0,
  ordShortSum: 0,
  spShortSum: 0
})

// 收集所需的指令
const lostNo = ref({
  lotNo: 0
})

//获取号码明细
const GetNumbeDetails = async () => {
  isLoading1.value = true
  isLoading2.value = true
  isLoading3.value = true
  const result = await VampWarehouseAccount(lostNo.value.lotNo)
  GlobalTabularData.value.detailDtos = result.detailDtos
  result.detailDtos.map((item, index) => {
    Object.keys(item).forEach((item1) => {
      if (item1 === 'inFlag') {
        item['backgroundColor'] = item[item1] as any
      }
    })
  })
  GlobalTabularData.value.inDtos = result.inDtos
  GlobalTabularData.value.outDtos = result.outDtos
  summaryData1.value[0].num = result.ordSum
  summaryData1.value[1].num = result.inSum
  summaryData1.value[2].num = result.ordShortSum
  summaryData1.value[3].num = result.spShortSum
  summaryData1.value[4].num = result.outSum
  summaryData1.value[5].num = result.stockSum
  summaryData1.value[6].num = result.rpSum
  summaryData2.value[0].num = result.inSum
  summaryData3.value[0].num = result.outSum
  color1()
  isLoading1.value = false
  isLoading2.value = false
  isLoading3.value = false
}

// 颜色
const color = ref<any>('')

// 鞋垫查询
const drawer1 = ref(false)

const clicktogetdata = (row: any) => {
  const { lotNo } = row
  lostNo.value.lotNo = lotNo
  isLoading1.value = true
  isLoading2.value = true
  isLoading3.value = true
  GetNumbeDetails()
}

interface summaryDataType {
  index: number
  num: number | undefined
}

// 计算金额总数
const summaryData = ref<summaryDataType[]>([
  {
    index: 3,
    num: 0
  }
])

const summaryData1 = ref<summaryDataType[]>([
  {
    index: 1,
    num: 0
  },
  {
    index: 2,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: 0
  },
  {
    index: 6,
    num: 0
  },
  {
    index: 7,
    num: 0
  },
  {
    index: 8,
    num: 0
  }
])

const summaryData2 = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  }
])

const summaryData3 = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  }
])

// 鞋面指令库存查询参数
const UpperInstructionParameter = ref<any>({
  color: '',
  factory: '',
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  style: '',
  deptName: '',
  slipDateEnd: '',
  slipDateStart: ''
})

// 鞋面指令数据存储
const upperInstructionData = ref<UpperBodyTableData>({
  pageTotal: 0,
  stockSum: 0,
  dto: []
})

const ConsumableTableData = async () => {
  isLoading.value = true
  const result = await VampStockInquiry(UpperInstructionParameter.value)
  upperInstructionData.value.dto = result.dto
  const { lotNo } = result.dto[0] || {}
  total.value = result.pageTotal
  summaryData.value[0].num = result.stockSum
  lostNo.value.lotNo = lotNo
  isLoading.value = false
  GetNumbeDetails()
}

const color1 = () => {
  if (GlobalTabularData.value.detailDtos.length !== 0) {
    GlobalTabularData.value.detailDtos.map((item) => {
      if (item.inFlag === 'Y' && item.outFlag === 'Y') {
        item.backgroundColor = '#3FFF38'
        tableHeader2.value[0].backgroundColor = '#3FFF38'
      }
      if (item.outFlag === null && item.inFlag === null) {
        item.backgroundColor = ''
        return
      }
      if (item.outFlag === null) {
        tableHeader2.value[0].backgroundColor = '#5daeff'
        item.backgroundColor = '#5daeff'
      }
    })
  }
}

// 统一调用接口
const interAceFunct = () => {
  // 鞋面入库选择指令函数
  ConsumableTableData()

  // Find下拉框数据
  // GetDepartmentData()
}

onMounted(() => {
  interAceFunct()

  QueryDeptNameMethods()
})

const tableHeader = ref([
  {
    label: '厂区',
    prop: 'factory',
    width: '55'
  },
  {
    label: '指令',
    prop: 'lotNo',
    width: '100'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '库存数量',
    prop: 'stockQty'
  },
  {
    label: '收料欠数',
    prop: 'inShort'
  },
  {
    label: '发料欠数',
    prop: 'outShort'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '订单数量',
    prop: 'ordQty'
  }
])

const tableHeader2 = ref([
  {
    label: '号码',
    prop: 'sizeNo',
    width: '50',
    backgroundColor: ''
  },
  {
    label: '订单数量',
    prop: 'ordQty',
    width: '50'
  },
  {
    label: '已缴数量',
    prop: 'inQty',
    width: '55'
  },
  {
    label: '已缴批次',
    prop: 'lsNo',
    width: '55'
  },
  {
    label: '正单欠数',
    prop: 'ordShort',
    width: '55'
  },
  {
    label: '预补欠数',
    prop: 'surplusShort',
    width: '55'
  },
  {
    label: '已发数量',
    prop: 'outQty',
    width: '55'
  },
  {
    label: '仓库库存',
    prop: 'stockQty',
    width: '55'
  },
  {
    label: '配套已领',
    prop: 'rePrint',
    width: '55'
  }
])

const tableHeader3 = ref([
  {
    label: '缴库部门',
    prop: 'deptName'
  },
  {
    label: '缴库日期',
    prop: 'date'
  },
  {
    label: '缴库数量',
    prop: 'qty'
  },
  {
    label: '操作员',
    prop: 'sysUser'
  }
])

const tableHeader4 = ref([
  {
    label: '领用部门',
    prop: 'deptName'
  },
  {
    label: '领用日期',
    prop: 'date'
  },
  {
    label: '领用数量',
    prop: 'qty'
  },
  {
    label: '操作员',
    prop: 'sysUser'
  }
])

// 分页器
const total = ref(0)

const handleSizeChange = (val: number) => {
  UpperInstructionParameter.value.pageNum = val
  ConsumableTableData()
}

const handleCurrentChange = (val: number) => {
  UpperInstructionParameter.value.pageSize = val
  ConsumableTableData()
}

const Launchform = (row: any) => {
  UpperInstructionParameter.value.factory = row[0].inputValue
  UpperInstructionParameter.value.lotNo = row[1].inputValue
  UpperInstructionParameter.value.style = row[2].inputValue
  UpperInstructionParameter.value.color = row[3].inputValue
  UpperInstructionParameter.value.deptName = row[5].selectValue
  UpperInstructionParameter.value.slipDateStart = row[4].dateValue[0]
  UpperInstructionParameter.value.slipDateEnd = row[4].dateValue[1]
  ConsumableTableData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '鞋垫查询') {
    drawer1.value = true
  }
  if (find === '更新鞋面库存') {
    update()
  }
}

// 更新鞋面库存
const update = async () => {
  const result = await updateData()
  if (result.code === 200) {
    ConsumableTableData()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

const clearFormList1 = () => {
  formList.value.forEach((item: any) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped></style>
